<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            body,
            html {
                margin: 0;
                padding: 0;
            }
            body>div {
                position:absolute;
                top:100px;
                left:100px;
                width: 100px;
                height: 120px;
                margin: 15px;
                padding: 20px;
                border: 10px solid brown;
                overflow-y: auto;
            }
            body>div>div {
                height: 416px;
                background: yellow;
            }
            p{
                margin: 0; 
            }
        </style>
        <title>title</title>
    </head>
    <body>
        <div id="father">
            <div id="baby">
                <p>**********</p>
                <p>**********</p>
                <p>**********</p>
                <p>**********</p>
                <p>**********</p>
                <p>**********</p>
                <p>**********</p>
                <p>**********</p>
                <p>**********</p>
                <p>**********</p>
                <p>**********</p>
                <p>**********</p>
            </div>
        </div>
        <script>
            var oDiv = document.getElementsByTagName("div")[0];
            oDiv.scrollTop = oDiv.scrollHeight/2;
            console.log(oDiv.offsetHeight); //180:height+padding+border;
            console.log(oDiv.clientHeight); //143:padding+height-滚动条(17);
            console.log(oDiv.scrollHeight); //456:padding+全部内容高度;
            console.log(oDiv.scrollTop);    //228:可见内容顶部到全部内容顶部的距离;
			var oFahter = document.getElementById('father');
			var baby = document.getElementById('baby');
			// baby.addEventListener('scroll',function(e){
			// 	console.log(e,'baby');
			// })
			// var timer = null;
			// oFahter.addEventListener('scroll',function(e){
			// 	clearTimeout(timer);
			// 	timer = setTimeout(()=>{
			// 		console.log(e,'father');
			// 	},450)
			// })
			
			oFahter.addEventListener('scroll',function(e){
				var target = e.target;
				console.log(target.scrollTop);
			})
			
			// window.addEventListener('scroll',function(e){
			// 	console.log(e,1111);
			// })
        </script>
    </body>
</html>